<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				text-decoration: none;
				list-style: none;
			}
			#boddy{
				
			}
			#tupian {
				width: 600px;
				height: 800px;
				margin: 20px 10px;
				float: left;
			}
			
			#img01 img {
				width: 600px;
				height: 550px;
			}
			
			#img02 {
				
			}
			
			#img02 ul li {
				float: left;
				padding: 20px 25px;
			}
			
			#img02 ul li:nth-of-type(1) {
				padding-left: 50px;
			}
			
			#img02 ul li img {
				width: 80px;
				height: 80px;
				border-radius: 10px;
			}
			#img02 ul li img:hover #img01 img{
				<img src="img/03.png" alt="">
			}
			#jichu {
				width: 800px;
				height: 800px;
				float: right;
			}
			
			#jichu h1 {
				padding: 20px 10px;
			}
			
			#jichu02 {
				width: 750px;
				height: 170px;
				background-color: #F7F9FA;
				border-radius: 10px;
			}
			
			#jichu02 ul li {
				padding: 7px 10px;
				color: #71797F;
			}
			
			#jichu02 ul li:nth-of-type(1) {
				padding: 13px 10px;
				background-color: #F3F5F7;
				border-radius: 10px;
			}
			
			#j01 {
				font-size: 30px;
				color: red;
				padding: 0px 25px;
			}
			
			#j02 {
				font-size: 5px;
				float: right;
				color: #333333;
				padding-top: 20px;
			}
			
			#j02 span {
				font-size: 5px;
				color: red;
				padding: 0;
			}
			
			.s1 {
				color: #333333;
				padding: 0px 30px;
				font-size: 13px;
			}
			
			#xinxi2 {
				width: 750px;
				height: 350px;
			}
			
			#xinxi2 ul li {
				padding: 5px 20px;
				color: gray;
				font-size: 15px;
			}
			
			#xinxi2 ul li p {
				padding: 10px 0px;
				color: #333;
			}
			
			#xinxi2 ul li button {
				width: 60px;
				height: 45px;
				margin: 20px 50px 0px 0px;
				border: 2px solid #ccc;
				background-color: white;
			}
			
			#xinxi2 ul li button:hover {
				border-color: #FF734C;
				background-color: #FFF0EC;
			}
			
			#butt {
				width: 500px;
				height: 200px;
				text-align: center;
			}
			
			#butt a:nth-of-type(1) {
				display: block;
				/* ↑将a标签转为块级元素 */
				width: 200px;
				height: 56px;
				border: 1px solid #FFD8CE;
				background-color: #FFF0EC;
				border-radius: 40px;
				color: #FF734C;
				font-size: 20px;
				font-weight: bolder;
				float: left;
				line-height: 56px;
			}
			
			#butt a:nth-of-type(2) {
				display: block;
				width: 200px;
				height: 56px;
				border: 1px solid #FF734C;
				background-color: #FF734C;
				border-radius: 40px;
				color: #ffffff;
				font-size: 20px;
				font-weight: bolder;
				margin-left: 50px;
				float: left;
				line-height: 56px;
			}
		</style>
	</head>
	<body>
		<div id="boddy">
			<div id="tupian">
				<div id="img01">
					<img src="img/02.png" alt="">
				</div>
				<div id="img02">
					<ul>
						<li><img src="img/03.png" alt=""></li>
						<li><img src="img/04.png" alt=""></li>
						<li><img src="img/05.png" alt=""></li>
						<li><img src="img/06.png" alt=""></li>
					</ul>
				</div>
			</div>
			<div id="jichu">
				<h1>提拉米苏（约2磅）</h1>
				<div id="jichu02">
					<ul>
						<li>
							售价
							<span id="j01">￥198</span>
							市场价：￥338
							<span id="j02">已售<span>6264</span>件</span>
						</li>
						<li>
							材料
							<span class="s1">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</span>
						</li>
						<li>
							包装
							<span class="s1">一次性蛋糕用具1套</span>
						</li>
						<li>
							备注
							<span class="s1">品牌：悦轩饼家</span>
						</li>
					</ul>
				</div>
				<div id="xinxi2">
					<ul>
						<li>
							配送说明
							<p>北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
						</li>
						<li>
							配送至
							<p>郑州</p>
						</li>
						<li>
							说明
							<p>深圳大鹏新区暂时不配送</p>
						</li>
						<li>
							选择<br />
							<button>2磅</button>
							<button>3磅</button>
							<button>4磅</button>
						</li>
					</ul>
				</div>
				<div id="butt">
					<a class="button" href="javascript:;">加入购物车</a>
					<a class="button" href="javascript:;">立即购买</a>
				</div>
			</div>
		</div>
	</body>
</html>